<template>
  <el-form label-position="top" class="p-10">
    <el-form-item label="pc端图标">
      <el-input v-model="activeData.extConfig.iconName"></el-input>
    </el-form-item>
    <el-form-item label="移动端图标(图片链接)">
      <el-input v-model="activeData.extConfig.iconUrl"></el-input>
    </el-form-item>
    <el-form-item label="右上角徽标内容">
      <el-input v-model="activeData.extConfig.iconBadge"></el-input>
    </el-form-item>
    <el-form-item label="图标大小">
      <el-input v-model="activeData.extConfig.iconSize"></el-input>
    </el-form-item>
    <el-form-item label="是否显示图标右上角小红点">
      <el-switch v-model="activeData.extConfig.iconDot" />
    </el-form-item>
    <el-form-item label="图标颜色">
      <div class="block">
        <el-color-picker
          v-model="activeData.extConfig.iconColor"
        ></el-color-picker>
    <el-form-item label="图标库链接地址">
      <el-link :href="iconGroupHref" target="_blank" type="primary">链接</el-link>
    </el-form-item>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import { loadRoute3Path } from '@/utils/loadRemote'
export default {
  name: "icon-config",
  props: ["activeData"],
  data() {
    return {};
  },
  computed: {
    iconGroupHref() {
      const contextPath = loadRoute3Path('')
      return `${contextPath}/index.html#/manager/source_store`
    },
  },
  watch: {},
  methods: {},
};
</script>
